<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.css">
    <title>bs</title>
    <style>
        .test-box {
            z-index: 2000;
        }

        .test-box button {
            /*flex: 0 0 33.3333%;*/
            flex-grow: 1;
            flex-shrink: 0;
        }

    </style>
<body class="bg-light">


<div class="position-fixed top-50 start-50 translate-middle test-box">
    <div class="d-flex align-items-center justify-content-center flex-wrap">
        <button class="btn btn-success" id="btn">点我</button>

    </div>

</div>


<script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
<script src="dist/js/bootstrap-notify.min.js"></script>


<script>

    document.querySelector('#btn').addEventListener('click', function () {
        BootstrapNotify.show({
            body: `
    	<img class="rounded-circle" width="100"  src="https://img2.baidu.com/it/u=1057753685,2671848790&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=485">
		<div>
			<h4 class="text-muted mt-3">王伦在梁山做头领时是否死的冤?</h4>
			<p class="text-secondary">
				<button class='btn btn-danger'>罪不致死</button> <button class='btn btn-success  ms-2'>关闭,不想评价</button>
			</p>
		</div>
    `,
            autohide: false,
            onShow: function (notify) {
                notify.template.onclick = function (event) {
                    event.preventDefault();
                    if (event.target.classList.contains('btn-danger')) {
                        BootstrapNotify.show("你选择了-罪不致死")
                    } else if (event.target.classList.contains('btn-success')) {
                        notify.hide();
                    }
                }
            }
        });
    });


</script>

</body>
</html>
